<template>
	<view class="content">
		<view class="topBox">
			<view class="logo" :style="{paddingTop:navBarTop + 'px'}">
				<image src="../../static/logo.png" mode=""></image>
			</view>
		</view>
		
		<view class="homePage">
			<view class="tabList">
				<text @click="changeTab(index)" :class="suo === index?'active':''" v-for="(item,index) in tabList" :key="index">{{item}}</text>
			</view>
			
			<block v-for="(item,index) in listData" :key="index">
				<view class="tongBox" :class="'tongBox' + (index + 1)"  @click="goTask(item)">
					<view class="tongTop">
						{{item.serviceTypeName}}数据<text>截至{{currentTime}}</text>
					</view>
					<view class="tongList">
						<block v-for="(sitem,sindex) in item.statusStats" :key="sindex">
							<view class="tongli">
								<view class="sttTxt">
									{{sitem.statusName}}
								</view>
								<view class="countNumber">
									{{sitem.count}}
								</view>
							</view>
						</block>
						
					</view>
				</view>
			</block>
			
		</view>
		
		<otherBottom :suo="1"></otherBottom>
		
	</view>
</template>

<script>
	import otherBottom from '@/components/otherBottom.vue';
	import { getOrderStatistics } from '@/api/login.js';
	import moment from 'moment';
	export default {
		components:{
			otherBottom
		},
		data() {
			return {
				navBarTop: null,
				currentTime: '',
				suo: 0,
				queryItem:{
					dateRange: 1,
					masterId: ''
				},
				listData: [],
				tabList: ['今日服务','明日服务','更多服务'],
				statusList: ['待服务','服务中','已完成','已评价']
			}
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarTop = menuButtonInfo.top;
		},
		onShow() {
			this.currentTime = moment().format('YYYY/MM/DD HH:mm:ss');
			this.queryItem.masterId = uni.getStorageSync('userInfo').id;
			this.getDataList();
		},
		methods: {
			changeTab(index){
				this.suo = index;
				this.queryItem.dateRange = index + 1;
				this.getDataList();
			},
			getDataList(){
				getOrderStatistics(this.queryItem).then(res=>{
					if(res.code == 200) {
						this.listData = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			goTask(val){
				uni.setStorageSync('orderSttInfo',val.statusStats);
				uni.navigateTo({
					url: '/pages/engineer/taskList?idd=' + val.serviceType + '&dateType=' + this.suo
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color:#3671E9;
	.topBox{
		.logo{
			image{
				display: block;width:218rpx;height:58rpx;margin-left:66rpx;
			}
		}
	}
	.homePage{
		background: #F6F6F6;box-shadow: 0px 8rpx 8rpx 0px rgba(0,0,0,0.25);border-radius: 42rpx 42rpx 0 0;margin-top:56rpx;
		padding-bottom:172rpx;
		.tabList{
			@include flx;padding:36rpx 0 24rpx;justify-content: center;
			text{
				display: block;@include baseFont(32rpx,#333,44rpx);margin-right:90rpx;padding-bottom:18rpx;position: relative;
			}
			text:last-of-type{
				margin-right:0;
			}
			.active::after{
				content:'';width: 52rpx;height: 6rpx;background: #3671E9;border-radius: 3rpx;position: absolute;
				bottom:0;left:50%;transform: translateX(-50%);
			}
		}
		.tongBox{
			padding:0 32rpx;margin-bottom:40rpx;
			.tongTop{
				@include baseFont(30rpx,#333,36rpx);font-weight:500;margin-bottom:24rpx;
				text{
					font-size: 24rpx;font-weight:400;color: #979797;padding-left:12rpx;line-height:36rpx;
				}
			}
			.tongList{
				@include flx;justify-content: space-between;
				.tongli{
					width: 157rpx;height: 180rpx;background: #E66841 url('../../static/shi1.png') no-repeat right bottom;
					border-radius: 20rpx;background-size:80rpx 90rpx;
					.sttTxt{
						@include baseFont(26rpx,rgba(255,255,255,0.8),32rpx);padding:24rpx 0 12rpx 22rpx;
					}
					.countNumber{
						@include baseFont(44rpx,#fff,1);margin-left:22rpx;
					}
				}
				.tongli:nth-of-type(2){
					background-image: url('../../static/shi2.png');background-size:86rpx 102rpx;
				}
				.tongli:nth-of-type(3){
					background-image: url('../../static/shi3.png');background-size:94rpx;
				}
				.tongli:nth-of-type(4){
					background-image: url('../../static/shi4.png');background-size:92rpx;
				}
			}
		}
		.tongBox2{
			.tongli{
				background-color:#3775FF!important;
			}	
		}
		.tongBox3{
			.tongli{
				background-color:#42A656!important;
			}	
		}
		.tongBox4{
			.tongli{
				background-color:#6E60FE!important;
			}	
		}
	}
}
</style>
